<template>
  <div>
    <Title title="评论"></Title>
    <div class="post-con">
      <!-- 正文内容 -->
      <el-input
        type="textarea"
        class="con"
        :autosize="{ minRows: 4}"
        placeholder="来吧，尽情发挥吧"
        v-model="input"
      ></el-input>
      <el-button
        type="primary"
        class="send"
        round
        @click="sendComment()"
        v-loading.fullscreen.lock="fullscreenLoading"
      >
        发布
        <i class="el-icon-top el-icon--right"></i>
      </el-button>
    </div>
  </div>
</template>

<script>
import Title from "../components/Title.vue";

import { sendComment } from "../api/luntan-api";

export default {
  components: {
    Title
  },
  data() {
    return {
      input: "",
      postsId: "",
      fullscreenLoading: false
    };
  },
  created() {
    // console.log(this.$route.query.postsId);
    this.postsId = this.$route.query.postsId;
  },
  methods: {
    sendComment() {
      if (this.input == "") {
        this.$notify.error({
          message: "请输入内容",
          position: "top-left",
          duration: 1000
        });
        return;
      }
      this.fullscreenLoading = true;
      setTimeout(() => {
        this.fullscreenLoading = false;
        sendComment(this.$route.query.postsId, this.input).then(res => {
          //是否登录
          if (res.code == 403) {
            if (!this.$route.path.includes("/home/login")) {
              this.$notify.error({
                message: "请登录",
                position: "top-left",
                duration: 1500
              });
              this.$router.push({
                // 登录的地址
                path: "/home/login"
              });
            }
            return;
          }

          this.$notify({
            message: "评论成功",
            type: "success",
            position: "top-left",
            duration: 1000
          });
          console.log(res);
          //发送评论后刷新评论列表
          this.$router.push({
            path: `/home/post-detail`,
            query: { postsId: this.postsId }
          });
        });
      }, 1000);
    }
  }
};
</script>

<style lang="less" scoped>
.post-con {
  width: 100%;
  margin: auto;
  overflow: hidden;
}
//富文本框无外边框
/deep/ .el-textarea__inner {
  border: none;
}
.send {
  float: right;
  margin-right: 20px;
  margin-top: 20px;
}
</style>